<template>
  <div class="center_bottomchart">
    <div class="center_bottomchart-header">
      <div class="title1">{{ title }}</div>
      <Select :isTable="false" :dataSwitch="true" v-model="checkList">
        <template slot="left">
          <el-button size="small" type="primary" @click="showBig = true"
            >预览</el-button
          >
          <el-button size="small" style="margin-right: 8px;" type="primary" @click="exportData"
            >导出</el-button
          >
          <span class="datashow">数据显示:</span>
          <el-switch v-model="showLabel" active-color="#13ce66"> </el-switch>
        </template>
      </Select>
    </div>
    <div class="bot">
      <Echart ref="childRef" :options="options" id="bottomLeftChart" class="echarts_bottom1" :isResize="true"></Echart>
      
    </div>
    <!-- 预览 -->
    <el-dialog title="预览" fullscreen :modal-append-to-body="false" :visible.sync="showBig" custom-class="chart-dialog">
      <div class="bot2"><Echart :options="options" id="bottomLeftChart2" class="echarts_bottom1" :isResize="true"></Echart></div>
        
      </el-dialog>
  </div>
</template>

<script>
import { currentGET } from "api";
import { color, graphic } from "echarts";
import Select from "./Select.vue";

function toFixed(val, fix = 0) {
  return val ? Number(val).toFixed(fix) : val;
}
const label = {
  show: true,
  position: "top",
};
export default {
  props: {
    title: {
      type: String,
      default: "图表",
    },
    data: {
      type: Array,
      default: () => [],
    },
    checked: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    Select,
  },
  data() {
    return {
      options: {},
      checkList: [
        "中长期电量",
        "日前电量",
        "实时电量",
        "抄表电量",
        "中长期电价",
        "日前电价",
        "实时电价",
        "抄表电价",
      ],
      showLabel: true,
      showBig: false,
    };
  },
  created() {
    this.init(this.data);
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
    checkList(val) {
      this.init(this.data);
      console.log(val, "checkList------");
    },
    showLabel: {
      handler() {
        this.init(this.data);
      },
      deep: true,
    },
  },
  methods: {
    exportData(){
      this.$refs.childRef.saveAsImage()
    },
    // getData() {
    //   this.pageflag = true;
    //   currentGET("big6", { companyName: this.companyName }).then((res) => {
    //     // console.log("安装计划", res);
    //     if (res.success) {
    //       const obj = {};
    //       Object.keys(res.data).forEach((kk) => {
    //         obj[kk] = res.data[kk].slice(0, 5);
    //       });
    //       this.dataSource = obj;
    //       this.init(obj);
    //     } else {
    //       this.pageflag = false;
    //       this.$Message({
    //         text: res.msg,
    //         type: "warning",
    //       });
    //     }
    //   });
    // },
    handleSeries(obj) {
      const arr = [];

      this.checked.forEach((kk) => {
        arr.push({
          name: kk + "-" + "中长期电量",
          name1: "中长期电量",
          type: "bar",
          barWidth: 16,
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: "#5470c6",
          },
          data: obj[`${kk}-midLongTermPower`],
          label: { ...label, show: this.showLabel },
        });
      });

      this.checked.forEach((kk) => {
        arr.push({
          name: kk + "-" + "日前电量",
          name1: "日前电量",
          type: "bar",
          barWidth: 16,
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: "#91cc75",
          },
          data: obj[`${kk}-dayAheadClearedPower`],
          label: { ...label, show: this.showLabel },
        });
      });

      this.checked.forEach((kk) => {
        arr.push({
          name: kk + "-" + "实时电量",
          name1: "实时电量",
          type: "bar",
          barWidth: 16,
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: "#fac858",
          },
          data: obj[`${kk}-realTimeClearedPower`],
          label: { ...label, show: this.showLabel },
        });
      });

      this.checked.forEach((kk) => {
        arr.push({
          name: kk + "-" + "抄表电量",
          name1: "抄表电量",
          type: "bar",
          barWidth: 16,
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: "#ee6666",
          },
          data: obj[`${kk}-meterReadingPower`],
          label: { ...label, show: this.showLabel },
        });
      });

      this.checked.forEach((kk) => {
        arr.push({
          name: kk + "-" + "中长期电价",
          name1: "中长期电价",
          type: "line",
          smooth: false,
          showAllSymbol: false,
          symbol: "circle",
          symbolSize: 6,
          showSymbol: true,
          yAxisIndex: 1,
          boundaryGap: false,
          connectNulls: true,
          clip: false,
          itemStyle: {
            color: "#5470c6",
          },
          lineStyle: {
            width: 2, // 设置线宽
          },
          data: obj[`${kk}-midLongTermPrice`],
          label: { ...label, show: this.showLabel },
        });
      });
      this.checked.forEach((kk) => {
        arr.push({
          name: kk + "-" + "日前电价",
          name1: "日前电价",
          type: "line",
          smooth: false,
          showAllSymbol: false,
          symbol: "circle",
          symbolSize: 6,
          showSymbol: true,
          yAxisIndex: 1,
          boundaryGap: false,
          connectNulls: true,
          clip: false,
          itemStyle: {
            color: "#91cc75",
          },
          lineStyle: {
            width: 2, // 设置线宽
          },
          data: obj[`${kk}-dayAheadClearedPrice`],
          label: { ...label, show: this.showLabel },
        });
      });
      this.checked.forEach((kk) => {
        arr.push({
          name: kk + "-" + "实时电价",
          name1: "实时电价",
          type: "line",
          smooth: false,
          showAllSymbol: false,
          symbol: "circle",
          symbolSize: 6,
          showSymbol: true,
          yAxisIndex: 1,
          boundaryGap: false,
          connectNulls: true,
          clip: false,
          itemStyle: {
            color: "#fac858",
          },
          lineStyle: {
            width: 2, // 设置线宽
          },
          data: obj[`${kk}-realTimeClearedPrice`],
          label: { ...label, show: this.showLabel },
        });
      });
      this.checked.forEach((kk) => {
        arr.push({
          name: kk + "-" + "抄表电价",
          name1: "抄表电价",
          type: "line",
          smooth: false,
          showAllSymbol: false,
          symbol: "circle",
          symbolSize: 6,
          showSymbol: true,
          yAxisIndex: 1,
          boundaryGap: false,
          connectNulls: true,
          clip: false,
          itemStyle: {
            color: "#ee6666",
          },
          lineStyle: {
            width: 2, // 设置线宽
          },
          data: obj[`${kk}-meterReadingAvgPrice`],
          label: { ...label, show: this.showLabel },
        });
      });

      // [
      //     {
      //       name: "中长期电量",
      //       name1: "中长期电量",
      //       type: "bar",
      //       barWidth: 16,
      //       itemStyle: {
      //         borderRadius: [5, 5, 0, 0],
      //         color: "#017efa",
      //       },
      //       data: midLongTermPower,
      //       label: { ...label, show: this.showLabel },
      //     },
      //     {
      //       name: "日前电量",
      //       name1: "日前电量",
      //       type: "bar",
      //       barWidth: 16,
      //       itemStyle: {
      //         borderRadius: [5, 5, 0, 0],
      //         color: "#51cbff",
      //       },
      //       data: dayAheadClearedPower,
      //       label: { ...label, show: this.showLabel },
      //     },
      //     {
      //       name: "实时电量",
      //       name1: "实时电量",
      //       type: "bar",
      //       barWidth: 16,
      //       itemStyle: {
      //         borderRadius: [5, 5, 0, 0],
      //         color: "#30d887",
      //       },
      //       data: realTimeClearedPower,
      //       label: { ...label, show: this.showLabel },
      //     },
      //     {
      //       name: "中长期电价",
      //       name1: "中长期电价",
      //       type: "line",
      //       smooth: false,
      //       showAllSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       showSymbol: true,
      //       yAxisIndex: 1,
      //       boundaryGap: false,
      //       connectNulls: true,
      //       clip: false,
      //       itemStyle: {
      //         color: "#017efa",
      //       },
      //       lineStyle: {
      //         width: 2, // 设置线宽
      //       },
      //       data: midLongTermPrice,
      //       label: { ...label, show: this.showLabel },
      //     },
      //     {
      //       name: "日前电价",
      //       name1: "日前电价",
      //       type: "line",
      //       smooth: false,
      //       showAllSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       showSymbol: true,
      //       yAxisIndex: 1,
      //       boundaryGap: false,
      //       connectNulls: true,
      //       clip: false,
      //       itemStyle: {
      //         color: "#51cbff",
      //       },
      //       lineStyle: {
      //         width: 2, // 设置线宽
      //       },
      //       data: dayAheadClearedPrice,
      //       label: { ...label, show: this.showLabel },
      //     },
      //     {
      //       name: "实时电价",
      //       name1: "实时电价",
      //       type: "line",
      //       smooth: false,
      //       showAllSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       showSymbol: true,
      //       yAxisIndex: 1,
      //       boundaryGap: false,
      //       connectNulls: true,
      //       clip: false,
      //       itemStyle: {
      //         color: "#30d887",
      //       },
      //       lineStyle: {
      //         width: 2, // 设置线宽
      //       },
      //       data: realTimeClearedPrice,
      //       label: { ...label, show: this.showLabel },
      //     },
      //   ].filter((item) => this.checkList.includes(item.name1))
      return arr.filter((item) => this.checkList.includes(item.name1));
    },
    init(newData) {
      const category = [],
        midLongTermPower = [], // 中长期电量
        dayAheadClearedPower = [], // 日前电量
        realTimeClearedPower = [], // 实时电量
        midLongTermPrice = [], // 中长期电价
        dayAheadClearedPrice = [], // 日前电价
        realTimeClearedPrice = []; // 实时电价

      const obj = {
        // midLongTermPower: [], // 中长期电量
        // dayAheadClearedPower: [], // 日前电量
        // realTimeClearedPower: [], // 实时电量
        // midLongTermPrice: [], // 中长期电价
        // dayAheadClearedPrice: [], // 日前电价
        // realTimeClearedPrice: [], // 实时电价
      };
      this.checked.forEach((kk) => {
        obj[`${kk}-midLongTermPower`] = [];
        obj[`${kk}-dayAheadClearedPower`] = [];
        obj[`${kk}-realTimeClearedPower`] = [];
        obj[`${kk}-meterReadingPower`] = [];
        obj[`${kk}-midLongTermPrice`] = [];
        obj[`${kk}-dayAheadClearedPrice`] = [];
        obj[`${kk}-realTimeClearedPrice`] = [];
        obj[`${kk}-meterReadingAvgPrice`] = [];
      });

      newData.forEach((item) => {
        if (item.time !== '合计') {
        category.push(item.time);
        this.checked.forEach((kk) => {
          obj[`${kk}-midLongTermPower`].push(
            toFixed(item[`${kk}-midLongTermPower`], 2)
          );
          obj[`${kk}-dayAheadClearedPower`].push(
            toFixed(item[`${kk}-dayAheadClearedPower`], 2)
          );
          obj[`${kk}-realTimeClearedPower`].push(
            toFixed(item[`${kk}-realTimeClearedPower`], 2)
          );
          obj[`${kk}-meterReadingPower`].push(
            toFixed(item[`${kk}-meterReadingPower`], 2)
          );
          obj[`${kk}-midLongTermPrice`].push(
            toFixed(item[`${kk}-midLongTermPrice`], 2)
          );
          obj[`${kk}-dayAheadClearedPrice`].push(
            toFixed(item[`${kk}-dayAheadClearedPrice`], 2)
          );
          obj[`${kk}-realTimeClearedPrice`].push(
            toFixed(item[`${kk}-realTimeClearedPrice`], 2)
          );
          obj[`${kk}-meterReadingAvgPrice`].push(
            toFixed(item[`${kk}-meterReadingAvgPrice`], 2)
          );
        });
        }
        // midLongTermPower.push(toFixed(item.dayAheadClearedPower, 0))
        // dayAheadClearedPower.push(toFixed(item.dayAheadClearedPower, 0))
        // realTimeClearedPower.push(toFixed(item.realTimeClearedPower, 0))
        // midLongTermPrice.push(toFixed(item.midLongTermPrice, 0))
        // dayAheadClearedPrice.push(toFixed(item.dayAheadClearedPrice, 0))
        // realTimeClearedPrice.push(toFixed(item.realTimeClearedPrice, 0))
      });

      this.options = {
        backgroundColor: '#04065f',
        // toolbox: {
        //   show: true,
        //   feature: {
        //     // dataView: { readOnly: false },
        //     saveAsImage: {
        //       // backgroundColor: '#FFFFFF',
        //       iconStyle: {
        //         color: '#FFFFFF'
        //       }
        //     }
        //   },
        //   left: 0,
        //   top: -100
        // },
        tooltip: {
          trigger: "axis",
          position: function (point, params, dom, rect, size) {
              // 固定在顶部
              return [point[0], '10%'];
          }
        },
        legend: {
          // data: this.checkList,
          //   data: ["已安装", "计划安装", "安装率"],
          //   top: "24",
          //   icon: "circle",
          type: "scroll",
          bottom: category.length > 1000 ? 24 : 8,
          itemWidth: 15,
          textStyle: {
            color: "#FFFFFF",
            fontSize: 16,
          },
        },
        grid: {
          left: "12",
          right: "12",
          bottom: "48",
          top: "18",
          containLabel: true,
        },
        xAxis: {
          data: category,
          axisLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#e2e9f5",
            },
          },
          axisLabel: {
            fontSize: "14",
            //   fontWeight: 400,
            color: "#FFFFFF ",
          },
          axisTick: {
            show: false,
          },
        },
        dataZoom: [
          {
            show: category.length > 1000,
            type: "slider",
            xAxisIndex: [0, 5],
            // zoomLock: true,
            // width: 7,
            height: 16,
            bottom: 8,
            // right: 12,
            // borderWidth: 0,
            // borderColor: "transparent",
            // backgroundColor: "rgba(4,42,102,0.7)",
            // fillerColor: "#043D92",
            // borderRadius: 10,
            // handleSize: 0,
            // showDetail: false,
            start: 0,
            end: category.length > 1000 ? 60 : 100,
            // brushSelect: false,
            filterMode: "filter",
            showDataShadow: false,
            // realtime: true,
            // textStyle: {
            //   color: "transparent",
            // },
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                // dashOffset: 5,
                // color: "#153877",
              },
            },
            axisLabel: {
              color: "#FFFFFF",
              // fontSize: '10',
              // fontWeight: 800,
              // formatter: "{value}",
            },
          },
          {
            show: true,
            splitLine: { show: false },
            axisLabel: {
              color: "#FFFFFF",
              // fontSize: '10',
              // fontWeight: 800,
              // formatter: "{value}",
            },
            // axisLine: {
            //   lineStyle: {
            //     type: 'dashed',
            //     // color: "#607FB5",
            //   },
            // },
            // axisLine: {
            //   lineStyle: {
            //     color: "#B4B4B4",
            //   },
            // },
            // axisLabel: {
            //   formatter: "{value}% ",
            // },
          },
        ],
        series: this.handleSeries(obj),
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottomchart {
  width: 100%;
  height: 100%;

  .center_bottomchart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;

    .title1 {
      font-size: 24px;
      font-weight: 600;
      min-width: 100px;
    }
  }

  .bot {
    width: 100%;
    // height: 100%;
    height: calc(100% - 50px);

    .echarts_bottom1 {
      width: 100%;
      height: 100%;
    }
  }

  .bot2{
     width: 100%;
    // height: 100%;
    height: 800px;
  }
}
</style>
